<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <form>
    <input type="text" name="username" placeholder="请输入用户名" /><br />
    <input type="text" name="password" placeholder="请输入密码" /><br />
    <button type="submit">登录</button>
  </form>
</body>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
  //接口地址 http://ajax-api.itheima.net/api/data

  //获取表单元素
  // const btn = document.querySelector('button');
  const form = document.querySelector('form');

  const inputUsername = document.querySelector('input[name=username');
  const inputPassword = document.querySelector('input[name=password');

  // btn.addEventListener('click', function (e) {
  //   //阻止默认提交
  //   e.preventDefault()

  //   console.log(inputUsername.value);
  //   console.log(inputPassword.value);
  // })

  form.addEventListener('submit', function (e) {
    //阻止默认提交

    e.preventDefault()


    //发起ajax请求
    axios({
      url: 'http://ajax-api.itheima.net/api/data',
      method: 'post',
      data: {
        username: inputUsername.value,
        password: inputPassword.value
      }
    }).then(({ data: res }) => console.log(res))
  })

</script>

</html>